<style lang="scss" scoped>
.rate_set_wrap {
    margin-bottom: 20px;
    width: 100%;
    .rate_set_item {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        &.empty {
            line-height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #e5e5e5;
            width: 100%;
        }
        &.rate_set_header {
            font-weight: 550;
            font-size: 14px;
            color: #333;
            margin-bottom: 10px;
        }
        .rate {
            width: 200px;
        }
        .nickname {
            width: 200px;
        }
        .time {
            flex: 1;
            display: flex;
            align-items: center;
            .select-box {
                display: flex;
                align-items: center;
            }
        }
    }
    .rate_set_main {
        max-height: 200px;
        overflow-y: auto;
    }
}
</style>

<template>
    <div class="rate_set_wrap">
        <div class="rate_set_header rate_set_item">
            <div class="rate">添加用户名</div>
            <div class="nickname">昵称</div>
            <div class="time">选择投手</div>
        </div>
        <div class="rate_set_main">
            <div class="rate_set_item empty" v-if="!formData.rateList.length">
                暂无数据
            </div>
            <el-form
                label-width="0px"
                :rules="rules"
                ref="formRef"
                :inline="true"
                :model="formData"
            >
                <div
                    class="rate_set_item"
                    v-for="(item, index) in formData.rateList"
                    :key="index"
                >
                    <div class="rate">
                        <el-form-item
                            :prop="'rateList.' + index + '.platformAccount'"
                            :rules="{
                                required: true,
                                trigger: 'change',
                                validator: (...args) => validatorUserName(index, ...args)
                            }"
                        >
                            <el-input
                                v-model="item.platformAccount"
                                placeholder="请输入用户名"
                                clearable
                            />
                        </el-form-item>
                    </div>
                    <div class="nickname">
                        <el-form-item
                            :prop="'rateList.' + index + '.platformNickName'"
                            :rules="{
                                required: true,
                                message: '请输入昵称',
                                trigger: 'blur',
                            }"
                        >
                            <el-input
                                v-model="item.platformNickName"
                                placeholder="请输入昵称"
                                clearable
                            />
                        </el-form-item>
                    </div>
                    <div class="time">
                        <el-form-item
                            :prop="'rateList.' + index + '.username'"
                            :rules="{
                                required: true,
                                message: '请选择投手',
                                trigger: 'blur',
                            }"
                        >
                            <div class="select-box">
                                <el-select
                                    style="width: 150px"
                                    v-model="item.username"
                                    placeholder="选择投手"
                                >
                                    <el-option
                                        v-for="item in pitcherList"
                                        :key="item.id"
                                        :label="item.username"
                                        :value="item.username"
                                    />
                                </el-select>
                                <el-popconfirm
                                    title="确认删除该比例设置?"
                                    @confirm="deleteItem(index)"
                                >
                                    <template #reference>
                                        <el-button
                                            style="margin-left: 20px"
                                            type="danger"
                                            >删除</el-button
                                        >
                                    </template>
                                </el-popconfirm>
                            </div>
                        </el-form-item>
                    </div>
                </div>
                
            </el-form>
        </div>
        <div class="rate_set_item">
            <el-button @click="addReateItem" :icon="Plus" type="primary"
                >新增</el-button
            >
        </div>
    </div>
</template>

<script setup>
import { Plus } from "@element-plus/icons-vue";
import { reactive, watch } from "vue";
import useForm from "@/hooks/useForm";
import { DelPlatformAccount } from '@/apis/platform'
import { ElMessage } from "element-plus";
const props = defineProps({
    pitcherList: {
        type: Array,
        default: () => []
    },
    list: {
        type: Array,
        default: () => []
    }
});
const { formRef, search } = useForm();
const rules = {};
const formData = reactive({
    rateList: props.list || [],
});
watch(() => props.list, () => formData.rateList = props.list)
// 删除比例
const deleteItem = (index) => {
  const { id } = formData.rateList[index];
  if (!id) {
    formData.rateList.splice(index, 1);
    ElMessage({
      message: "删除成功",
      type: "success",
    });
  } else {
    DelPlatformAccount(id).then((res) => {
      formData.rateList.splice(index, 1);
      ElMessage({
        message: "删除成功",
        type: "success",
      });
    });
  }
};
defineExpose({
    validate: () => new Promise((resolve, reject) => {
        formRef.value.validate((valid) => {
            // 表单校验成功
            valid ? resolve() : reject()
        })
    })
})
// 新增比例
const addReateItem = () => {
    formData.rateList.push({
        rate: undefined,
        times: [],
    });
};
const validatorUserName = (index, value, rule, cb) => {
    value = formData.rateList[index].platformAccount
    if (!value) return cb(new Error('请输入用户名'))
    for (let i = 0; i < formData.rateList.length; i ++) {
        if (index === i) continue
        if (value === formData.rateList[i].platformAccount) {
            return cb(new Error(`该用户名已存在于第${i+1}条，请修改`))
        }
    }
    cb()
}
</script>
